<template>
  <div class="header">
    <div class="left">
      <img class="logo" src="../assets/logo.jpg" alt="logo">
      <router-link to="/main" style="text-decoration: none;color: black"><span style="padding-left: 15px">徐同学书店</span></router-link>

    </div>
    <div v-if="!isLogin">
      <el-button type="primary" @click="dialogFormVisible = true">登录</el-button>
      <el-button type="info" @click="register">注册</el-button>
    </div>

    <div v-else>
      <span style="margin-right: 10px;">尊敬的 {{ user.name }} ,你好!</span>
      <el-button type="info" @click="cart">购物车</el-button>
      <el-button type="warning" @click="order">订单</el-button>
      <el-button type="success" @click="addressFormVisible = true">收货地址</el-button>
      <el-button type="primary" @click="logout">退出</el-button>
    </div>

    <el-dialog title="收货地址" :visible.sync="addressFormVisible">
      <el-form :model="address">
        <el-form-item label="收件人姓名" :label-width="formLabelWidth">
          <el-input v-model="address.addressUserName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收件人性别">
          <el-radio-group v-model="address.addressUserSex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="收件人电话" :label-width="formLabelWidth">
          <el-input v-model="address.addressUserPhone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收件人详细地址" :label-width="formLabelWidth">
          <el-input v-model="address.addressDetailed" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addressFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addAddress">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="登录" :visible.sync="dialogFormVisible">
      <el-form :model="user" :ref="rules">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="username">
          <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="user.pwMd5" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="login(user)">确 定</el-button>
        <el-button type="info" @click="register">注 册</el-button>

      </div>
    </el-dialog>
  </div>
</template>

<script>
  import router from "../router";

  export default {
    name: "Header",
    data() {
      return {
        user:{
          userId:"",
          username:"",
          pwMd5:"",
          name:""
        },
        address:{
          addressUserName:"",
          addressUserSex:"0",
          addressUserPhone:"",
          addressDetailed:"",
          addressUserId:""
        },
        dialogFormVisible: false,
        addressFormVisible:false,
        formLabelWidth: '120px',
        isLogin:"",
        rules: {
          username: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
    }
  },
    methods:{
      login(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios.post("/user/login",this.user).then(res => {

              if(res.data.code == 0){
                this.user = res.data.data
                this.$message.success(res.data.message);
                sessionStorage.setItem("isLogin","true")
                sessionStorage.setItem("user_id",this.user.userId)
                this.isLogin = true
                this.getAddress()
                this.dialogFormVisible = false
                router.push("/main").catch(err => err)
              } else if(res.data.code == 702) {
                this.$message.error(res.data.message);
                this.dialogFormVisible = false
              } else if(res.data.code == 703)
                this.$message.error(res.data.message);
                this.dialogFormVisible = false
            })
          }
        });
      },
      logout() {
        sessionStorage.setItem('isLogin',"false")
        sessionStorage.setItem('user_id',"")
        this.isLogin = sessionStorage.getItem("isLogin")
        router.push("/main")
        location.reload()
      },
      cart() {
        router.push('/cart')
      },
      register(){
        this.dialogFormVisible = false
        router.push('/register')
      },
      addAddress() {
        if(this.address.addressUserName == "") {
          this.address.addressUserId = this.user.userId;
          console.log(this.address)
          this.$axios.post("/address/add", this.address).then(res => {
            if(res.data.code ==0){
              this.addressFormVisible= false
              console.log(res.data.data)
              this.$message.success(res.data.message)
            } else {
              this.addressFormVisible = false
              this.$message.error(res.data.message)
            }
          })
        } else {
          this.address.addressUserId = this.user.userId;
          console.log(this.address)
          this.$axios.post("/address/update", this.address).then(res => {
           if(res.data.code ==0){
             this.addressFormVisible= false
             console.log(res.data.data)
             this.$message.success(res.data.message)
           } else {
             this.addressFormVisible = false
             this.$message.error(res.data.message)
           }

          })
        }

      },
      getAddress() {
        console.log(this.user.userId)
          this.$axios.get("/address/get",{params:{address_user_id:sessionStorage.getItem("user_id")}}).then(res => {
            if(res.data.data == null) {

            } else {
              this.address = res.data.data
              this.address.addressUserSex = this.address.addressUserSex + ''
              console.log(res.data.data)
            }
          })
      },
      order() {
        router.push('/order')
      }
    },
    created() {
      if(this.user.username === "") {
        this.isLogin = false;
        sessionStorage.setItem("isLogin", "false")
      }
      this.isLogin  = sessionStorage.getItem('isLogin')
      if (this.isLogin == "true") {
        this.isLogin = true
      } else {
        this.isLogin = false
      }

    }
  }
</script>

<style scoped>
  .header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
  }
  .left {
    display: flex;
    align-items: center;
  }
  .logo {
    width: 40px;
    height: 40px;
    display: inline-block;
    box-sizing: border-box;
  }
</style>